<script setup lang="ts">
import { Card, Statistic } from 'ant-design-vue'
import { computed } from 'vue'

const props = defineProps<{
  title: string;
  value: number;
  suffix?: string;
  precision?: number;
  icon?: any;
  color?: string;
  loading?: boolean;
}>()

const cardStyle = computed(() => ({
  '--card-bg-color': props.color || '#1890ff',
  '--card-bg-color-light': props.color ? `${props.color}dd` : '#36cfc9'
}))
</script>

<template>
  <Card :loading="loading" :style="cardStyle">
    <Statistic
      :title="title"
      :value="value"
      :precision="precision"
      :suffix="suffix"
    >
      <template #prefix>
        <component :is="icon" v-if="icon" />
      </template>
    </Statistic>
  </Card>
</template>

<style scoped>
:deep(.ant-statistic-content) {
  font-size: 20px;
}
</style> 